<template>
    <h4 class="text-center">项目成本统计</h4>

    <div class="mt30">材料采购</div>
    <el-table :data="MaterialContract" border show-summary style="width: 100%;height: initial !important;">
        <el-table-column prop="b_name" label="供应商/分包班组" show-overflow-tooltip />
        <el-table-column prop="b_agent" label="负责人" show-overflow-tooltip />
        <el-table-column prop="b_mobile" label="联系电话" show-overflow-tooltip />
        <el-table-column prop="price" label="合同金额/分包内容" show-overflow-tooltip />
        <el-table-column label="结算金额（含税）" show-overflow-tooltip>
            <template #default="scope">
                <el-text>{{scope.row.price}}</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="remarks" label="供应内容" show-overflow-tooltip />
        <el-table-column prop="tax_rate" label="税率" show-overflow-tooltip />
        <el-table-column prop="tax_price" label="税金" show-overflow-tooltip />
        <el-table-column prop="tax_deduction_cost" label="税金" show-overflow-tooltip />

        <el-table-column prop="pay_price" label="已付金额" show-overflow-tooltip />
        <el-table-column prop="pay_ratio" label="已付比例" show-overflow-tooltip />
        <el-table-column prop="price" label="应付款总额" show-overflow-tooltip />
        <el-table-column prop="remarks" label="预计付款比例" show-overflow-tooltip />
        <el-table-column prop="remarks" label="剩余未付款项" show-overflow-tooltip />
        <el-table-column prop="remarks" label="结算状态" show-overflow-tooltip />
        <el-table-column prop="remarks" label="备注" show-overflow-tooltip />
    </el-table>

    <div class="mt30">双包</div>
    <el-table :data="MaterialDoubleContract" border show-summary style="width: 100%;height: initial !important;">
        <el-table-column prop="b_name" label="供应商/分包班组" show-overflow-tooltip />
        <el-table-column prop="b_agent" label="负责人" show-overflow-tooltip />
        <el-table-column prop="b_mobile" label="联系电话" show-overflow-tooltip />
        <el-table-column prop="price" label="合同金额/分包内容" show-overflow-tooltip />
        <el-table-column label="结算金额（含税）" show-overflow-tooltip>
            <template #default="scope">
                <el-text>{{scope.row.price}}</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="remarks" label="供应内容" show-overflow-tooltip />
        <el-table-column prop="tax_rate" label="税率" show-overflow-tooltip />
        <el-table-column prop="tax_price" label="税金" show-overflow-tooltip />
        <el-table-column prop="tax_deduction_cost" label="税金" show-overflow-tooltip />

        <el-table-column prop="pay_price" label="已付金额" show-overflow-tooltip />
        <el-table-column prop="pay_ratio" label="已付比例" show-overflow-tooltip />
        <el-table-column prop="price" label="应付款总额" show-overflow-tooltip />
        <el-table-column prop="remarks" label="预计付款比例" show-overflow-tooltip />
        <el-table-column prop="remarks" label="剩余未付款项" show-overflow-tooltip />
        <el-table-column prop="remarks" label="结算状态" show-overflow-tooltip />
        <el-table-column prop="remarks" label="备注" show-overflow-tooltip />
    </el-table>

    <div class="mt30">单包</div>
    <el-table :data="LaborContract" show-summary style="width: 100%;">
        <el-table-column prop="b_name" label="供应商/分包班组" show-overflow-tooltip />
        <el-table-column prop="b_agent" label="负责人" show-overflow-tooltip />
        <el-table-column prop="b_mobile" label="联系电话" show-overflow-tooltip />
        <el-table-column prop="price" label="合同金额/分包内容" show-overflow-tooltip />
        <el-table-column label="结算金额（含税）" show-overflow-tooltip>
            <template #default="scope">
                <el-text>{{scope.row.price}}</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="remarks" label="供应内容" show-overflow-tooltip />
        <el-table-column prop="tax_rate" label="税率" show-overflow-tooltip />
        <el-table-column prop="tax_price" label="税金" show-overflow-tooltip />
        <el-table-column prop="tax_deduction_cost" label="税金" show-overflow-tooltip />

        <el-table-column prop="pay_price" label="已付金额" show-overflow-tooltip />
        <el-table-column prop="pay_ratio" label="已付比例" show-overflow-tooltip />
        <el-table-column prop="price" label="应付款总额" show-overflow-tooltip />
        <el-table-column prop="remarks" label="预计付款比例" show-overflow-tooltip />
        <el-table-column prop="remarks" label="剩余未付款项" show-overflow-tooltip />
        <el-table-column prop="remarks" label="结算状态" show-overflow-tooltip />
        <el-table-column prop="remarks" label="备注" show-overflow-tooltip />
    </el-table>
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import http from '../../../../util/request';

const MaterialContract = ref<any[]>()
const MaterialDoubleContract = ref<any[]>()
const LaborContract = ref<any[]>()
const getData = () => {
    http.post('/statistics/costs',{model:'Reimburse'}).then((response:any)=>{
        MaterialContract.value = response.data.MaterialContract
        MaterialDoubleContract.value = response.data.MaterialDoubleContract
        LaborContract.value = response.data.LaborContract
    })
}

onMounted(()=>{
    getData()
})
</script>
<style scoped>
</style>
